<script setup lang="ts">
import { ref } from "vue";

// 我的参与的功能块设置
const myParticipation = [
  {
    text: "信息管理",
    img: "http://192.168.31.72:9000/books-bucket/static/index/book-index.png",
    url: "/pages/myinfo/myinfo",
  },
  {
    text: "多种征稿",
    img: "http://192.168.31.72:9000/books-bucket/static/index/pencil-index.png",
    url: "/pages/mycontribute/mycontribute",
  },
  {
    text: "引导阅读",
    img: "http://192.168.31.72:9000/books-bucket/static/index/paper-index.png",
    url: "",
  },
  {
    text: "审核平台",
    img: "http://192.168.31.72:9000/books-bucket/static/index/approve-index.png",
    url: "/pages/judge/judge",
  },
];
// 推荐模块的使用 -- 父调子逻辑
const recommendInstance = ref();
console.log("recommendInstance", recommendInstance);
// 注意，不可以直接绑定instance的方法到父亲页面中，需要曲线救国一下，自定义一个函数
const onscrollViewLowest = () => {
  console.log("调用recommend接口方法,onlowest");
  // 调用接口方法
  recommendInstance.value.onLowestOfScroll();
};
</script>

<template>
  <!-- 导航键位置 -->
  <scroll-view scroll-y @scrolltolower="onscrollViewLowest">
    <book-advertise />
    <view>
      <view class="good-nav">
        <view
          v-for="(item, index) in myParticipation"
          :key="index"
          hover-class="none"
        >
          <navigator :url="item.url">
            <image :src="item.img" mode="" />
            <text>{{ item.text }}</text>
          </navigator>
        </view>
      </view>
    </view>
    <!-- 推荐 -->
    <book-recommend ref="recommendInstance" />
  </scroll-view>
</template>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.good-nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: white;
  padding: 20rpx 16rpx;
  border-radius: 10rpx;

  view {
    navigator {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    image {
      width: 40rpx;
      height: 40rpx;
    }

    text {
      font-size: 24rpx;
      margin-top: 12rpx;
    }
  }
}

.scroll-view {
  flex: 1;
}
</style>
